<template>
  <div class="yl-clearfix">
    <div class="searchgrid">

      <input value=" 新增 "
             type="button"
             v-if="isUserSystemAdmin || isUserAgentAdmin"
             class="yl-input-button yl-float-left"
             @click="$router.push({name: '代理商创建'})">
      <div class="yl-float-right">
        <input class="yl-input-text" v-model="filters.keyword" type="text" placeholder="代理商/代理商编号/代理商ID">
        <input value=" 查询 " class="yl-input-button" type="button" @click="getAgentListByPageAndName">
      </div>
    </div>
    <div class="tab-content default-tab yl-clearfix" style="display: block">
      <el-table :data="pagination.data"
                highlight-current-row
                v-loading="listLoading"
                style="width: 100%;">
        <el-table-column label="#" prop="id"></el-table-column>
        <el-table-column label="代理商编号" prop="agent_number"></el-table-column>
        <el-table-column label="名称" prop="agent_name"></el-table-column>
        <el-table-column label="域名">
          <template scope="scope">
            <span v-text="scope.row.info ? scope.row.info.web_domain : ''"></span>
          </template>
        </el-table-column>

        <el-table-column label="上级代理商">
          <template scope="scope">
            <span v-if="scope.row.parent">{{scope.row.parent.agent_name}}</span>
          </template>
        </el-table-column>

        <el-table-column prop="owner_name" label="联系人">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话">
        </el-table-column>

        <el-table-column label="天配" width="45">
          <template scope="scope">
            <span v-text="calculatePercentage(scope.row,0)"></span>
          </template>
        </el-table-column>

        <el-table-column label="月配" width="45">
          <template scope="scope">
            <span v-text="calculatePercentage(scope.row,1)"></span>
          </template>
        </el-table-column>

        <el-table-column label="服务费" width="45">
          <template scope="scope">
            <span v-text="calculatePercentage(scope.row,2)"></span>
          </template>
        </el-table-column>


        <el-table-column prop="agent_level" label="代理值" width="46">
        </el-table-column>

        <el-table-column label="状态" width="46">
          <template scope="scope">
            <span v-text="scope.row.is_locked ? '禁用' : '正常'"></span>
          </template>
        </el-table-column>


        <el-table-column prop="created_time" label="添加时间">
        </el-table-column>

        <el-table-column label="操作" min-width="120">
          <template scope="scope">
            <router-link class="el-button el-button--default el-button--mini"
                         type="button"
                         :to="{name:'下级代理列表',query:{agent_id:scope.row.id}}">
              <i class="fa fa-sitemap" title="下级代理商"></i>
            </router-link>
            <!--<router-link class="el-button el-button&#45;&#45;default el-button&#45;&#45;mini"-->
            <!--type="button"-->
            <!--v-if="scope.row.parent"-->
            <!--:to="{name:'下级代理列表',query:{agent_id:scope.row.parent.id}}">-->
            <!--<i class="fa fa-university" title="上级代理商"></i>-->
            <!--</router-link>-->
            <!--<el-button size="mini" @click="handleEmployeeList(scope.row)" title="员工管理"><i class="fa fa-user"></i></el-button>-->
            <el-button size="mini"
                       @click="handleEditAgent(scope.row)"
                       title="代理修改"
                       v-if="(isUserAgentAdmin && scope.row.parent_id != userInfo.agent.id) || isUserSystemAdmin"><i class="fa fa-pencil"></i></el-button>
            <el-button size="mini" @click="handleAddChildAgent(scope.row)" title="添加下级代理" v-if="scope.row.agent_level < 5"><i class="fa fa-plus-square"></i></el-button>
            <el-button size="mini" @click="handlePlayAgent(scope.row)" title="扮演代理"><i class="fa fa-play-circle"></i></el-button>
          </template>
        </el-table-column>
      </el-table>


      <div class="yl-pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="pageIndexChange"
          :current-page="pagination.current_page"
          :page-sizes="[15, 30, 45, 60]"
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="parseInt(pagination.per_page)"
          :total="pagination.total"
          style="float:right;">
        </el-pagination>
      </div>

    </div>
  </div>

</template>

<script>
  import {agentList} from '../../api/agent';
  import {rolePlayIssueToken} from '../../api/user';
  import {TOKEN_OBJ_ID} from '../../common/tools';

  export default {
    data() {
      return {
        filters: {
          keyword: '',
          page: 1,
          size: 15,
        },
        playLoginUrl: '',
        pagination: {},
        listLoading: false,
      }
    },
    methods: {
      pageIndexChange(clickPageIndex) {
        //分页页面发生改变
        this.filters.page = clickPageIndex;
        this.getAgentListByPageAndName();
      },
      //获取用户列表
      getAgentListByPageAndName() {
        let params = this.filters;
        this.listLoading = true;
        agentList({params}).then((res) => {
          this.pagination = res.data;
          this.listLoading = false;
        }).catch(error => this.ezNotifyAxiosCatch(error));
      },
      handleSizeChange(size) {
        this.filters.size = size;
        this.filters.page = 1;
        this.getAgentListByPageAndName();
      },
      handleAddChildAgent: function (row) {

        let query = {parentId: row.id};
        this.$router.push({path: '/agent/create', query});
      },
      handleEmployeeList: function (row) {
        this.$router.push({name: '员工列表', query: {agent_id: row.id}})
      },
      handleEditAgent: function (row) {
        let id = row.id;
        this.$router.push({name: '代理商修改', params: {id}});
      },
      //角色扮演
      handlePlayAgent: function (row) {
        rolePlayIssueToken({agent_id: row.id}).then(res => {
          if (res.status == 1) {
            let token = res.data.accessToken;
            this.playLoginUrl = 'http://agent-gubao.591wmj.com/login?access_token=' + token;
          } else {
            this.ezNotifyAxiosThen(res)
          }
        });
      },
      calculatePercentage(row, type) {
        let percentage = '';
        if (!row.percentages) {
          return percentage;
        }
        row.percentages.forEach(value => {
          if (value.type == type) {
            percentage = value.percentage
          }
        })
        return percentage;
      }
    },
    mounted() {
      this.getAgentListByPageAndName();
    },
    watch: {
      playLoginUrl(newRoute, oldRoute) {
        window.open(
          newRoute,
          '_blank'
        );
      },
    },
  }
</script>

